<template>
  <div class="app-container">
    <el-tabs :key="forceUpdateKey" class="tabs-container" v-model="activeName" v-loading="loading">
      <el-tab-pane name="subjectInfo" label="主题基本信息" class="tab-content">
        <subject-info-form
          :subjectData="subjectData"
          @getSubjectInfo="getSubjectInfo"
          @changeValue="showTheme"
        />
      </el-tab-pane>

      <template v-if="systemType === 1 || systemType === 4 || systemType === 5">
        <el-tab-pane name="includeAffair" label="主题包含事项" class="tab-content">
          <include-service :subjectData="subjectData"/>
        </el-tab-pane>
      </template>
      <template v-if="systemType === 2 || systemType === 3">
        <el-tab-pane name="includeForm" label="主题包含表单" class="tab-content">
          <include-forms :subjectData="subjectData"/>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import SubjectInfoForm from './components/subjectInfoForm'
import IncludeService from './components/includeServices'
import IncludeForms from './components/includeForms'
import {getSubject} from "@/api/items/subject";

export default {
  name: "SubjectDetail",
  components: {SubjectInfoForm, IncludeService, IncludeForms},
  data() {
    return {
      activeName: 'subjectInfo',
      subjectData: {},
      loading: false,
      systemType: 0,
      forceUpdateKey: Math.random()
    }
  },
  methods: {
    // 获取主题基本信息
    getSubjectInfo(form) {
      // 判断是否为新增主题
      if (form && form.id) this.id = form.id;
      this.loading = true;
      getSubject(this.id).then(response => {
        if(!response.data){
          // 如果主题被删了，当前模式改为新增
          this.$router.push({
            name: 'SubjectDetail',
            query: {
              id: '',
              type: '2'
            }
          })
          // 强制组件重新渲染
          this.forceUpdateKey = Math.random()
          return
        }
        this.subjectData = response.data;
        this.systemType = response.data.systemType
      }).finally(() => {
        this.loading = false;
      });

    },
    showTheme(value) {
      this.systemType = value
    }
  },
  created() {
    // 如果有id表示不是新增，需要获取主题信息
    const {id, type} = this.$route.query;
    this.id = id;
    if (this.id && type !== '2') {
      this.getSubjectInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  width: 100%;
  padding: 10px 20px;
  min-height: inherit;

  .tabs-container {
    width: 100%;
  }

  ::v-deep .el-tabs__content {
    height: calc(100% - 55px);
  }

  .tab-content {
    width: 100%;
    height: 100%;
  }

}
</style>
